<template>
    <view class="success-modal" v-if="visible">
        <!-- 遮罩层 -->
        <view class="modal-mask" @click="close"></view>

        <!-- 弹框内容 -->
        <view class="modal-content">
            <!-- 成功图标 -->
            <view class="success-icon-container">
                <image :src="getFullImageUrl('@/static/image/dg.png')" class="success-icon"></image>
            </view>

            <!-- 标题 -->
            <view class="title-container">
                <text class="title-text">恭喜您抢单成功</text>
            </view>

            <!-- 订单信息 -->
            <view class="order-info-container">


                <view class="order-details-card">
                    <view class="order-title-row">
                        <view class="avatar-icon">
                            <image :src="order.icon || successOrderData.icon || '/static/image/touxiang.png'"
                                class="avatar-img"></image>
                        </view>
                        <text class="order-title">{{ order.title || successOrderData.job_title }}</text>
                    </view>

                    <view class="order-details">
                        <text class="detail-item">{{ order.people_num || '1人' }}</text>
                        <text class="detail-item">{{ order.person_info || successOrderData.person_info || '女生、26岁、168cm'
                        }}</text>
                        <text class="detail-item">{{ order.time_range || successOrderData.job_time }}</text>
                    </view>

                    <view class="detail-item">
                        <text>{{ order.description || order.skill_desc || successOrderData.job_content }}</text>
                    </view>

                    <view class="distance-info">
                        <text class="distance-text">{{ order.address || successOrderData.job_address }}</text>
                        <image :src="getFullImageUrl('@/static/release/dh.png')" mode="widthFix" class="location-icon" @click="navigateToLocation"></image>
                    </view>

                    <view class="distance-info">
                        <text class="distance-text">距您: {{ order.distance_info || successOrderData.distance_info
                        }}</text>

                    </view>
                </view>


            </view>

            <!-- 酬金信息 -->
            <view class="salary-container">
                <text class="salary-label">每人酬金: </text>
                <text class="salary-amount">¥{{ order.salary || successOrderData.salary }}</text>
            </view>

            <!-- 底部按钮 -->
            <view class="button-container">
                <button class="confirm-button" @click="close">我知道啦~</button>
            </view>
        </view>
    </view>
</template>

<script src="./OrderSuccessModal.js"></script>
<style lang="scss" src="./OrderSuccessModal.scss"></style>
